<template>
    <div :data-sub="sub" :data-sup="sup" :style="{ '--size': size }" class="token"
        :class="{ [type]: true, 'backside': backSide }">
        <div class="front">
            <div class="icon"></div>
        </div>
        <div class="back">
            <div class="icon"></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { TokenOptions } from '@/types/game/token';

const { type, size = '20px', backSide, sub, sup } = defineProps<TokenOptions>()
</script>

<style scoped>
.token {
    height: var(--size);
    width: var(--size);
    position: relative;
}

.token[data-sup]::before,
.token[data-sub]::after {
    font-size: calc(var(--size) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: calc(var(--size) / 2);
}

.token[data-sup]::before {
    content: attr(data-sup);
    left: calc(100% - var(--size) / 4);
    z-index: 1;
    background-color: rgb(220, 20, 60, 0.8);
}

.token[data-sub]::after {
    content: attr(data-sub);
    left: calc(100% - var(--size) / 4);
    top: calc(100% - var(--size) / 2);
    background-color: rgb(148, 0, 211, 0.8);
}

.token .front,
.token .back {
    height: 100%;
    width: 100%;
    background-image: radial-gradient(white, black);
    border-radius: 50%;
    border: gray solid calc(var(--size) * 0.1);
    backface-visibility: hidden;
    position: absolute;
    box-shadow: 1px 1px 5px #fff, -1px -1px 5px #fff;
}

.token .back {
    transform: rotateY(180deg);
}

.token.backside .front {
    transform: rotateY(180deg);
}

.token.backside .back {
    transform: rotateY(0deg);
}

.token .icon {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
}

.fate>.front>.icon,
.fate>.back>.icon {
    background-image: url(/src/assets/img/token/jadeware.webp);
}

.resource>.front>.icon,
.resource>.back>.icon {
    background-image: url(/src/assets/img/token/wheat.webp);
}

.development>.front>.icon,
.development>.back>.icon {
    background-image: url(/src/assets/img/token/bamboo-slip.webp);
}

.military>.front>.icon {
    background-image: url(/src/assets/img/token/sword.webp);
}

.military>.back>.icon {
    background-image: url(/src/assets/img/token/shield.webp);
}

.mobilization>.front>.icon,
.mobilization>.back>.icon {
    background-image: url(/src/assets/img/token/drum.webp);
}
</style>